<template>
  <div id="nav">
    <top-header>{{ headerTitle }}</top-header>
    <search-input
      :placeholder="placeholder"
      :maxlength="maxlength"
    ></search-input>
  </div>
  <router-view />

  <tab-bar></tab-bar>
</template>

<script>
import TopHeader from "./components/TopHeader";
import SearchInput from "@/components/Searchinput";
import { useStore } from "vuex";
import TabBar from "./components/TabBar";
import { useRouter } from "vue-router";
import { watch } from "@vue/runtime-core";

export default {
  components: {
    TopHeader,
    TabBar,
    SearchInput,
  },
  setup(props) {
    const store = useStore();
    // console.log(store.state);//代理对象

    const router = useRouter();
    // console.log(router.currentRoute.value);

    watch(
      //路由监视
      () => router.currentRoute.value.name,
      (value) => {
        store.commit("setHeaderTitle", value);
        store.commit("setplaceholder", value);
        store.commit("setMaxlength", value);
        store.commit("setField", value);
      }
    );

    return store.state;
  },
};
</script>
<style lang="less">
.container {
  padding: 0.81rem 0 0.44rem 0;
  box-sizing: border-box;
}
</style>
